 
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片/文件上传模块文档 - Layui</title>
<meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <script>
  ;!function(){self!==parent&&(location.href="//www.baidu.com/")}();
  </script>
  <link rel="stylesheet" href="../../layui/dist/css/layui.css" media="all">
  <link rel="stylesheet" href="../../static/css/global.css" media="all">
</head>
<body><div class="layui-header header header-doc" autumn="">
  <div class="layui-container">
    <a class="logo" href="../../index.html">
      <img src="../../static/images/layui/logo.png" alt="layui">
    </a>
    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
    <div class="layui-hide-xs site-notice"></div>
    
    <ul class="layui-nav" id="LAY_NAV_TOP">
      <li class="layui-nav-item layui-this">
        <a href="../index.html">文档</a> 
      </li>
      <li class="layui-nav-item ">
        <a href="../../demo/index.html">示例</a>
      </li>
      
      <li class="layui-nav-item">
        <a href="javascript:;">
          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
          周边
        </a>
        <dl class="layui-nav-child layui-nav-child-c">  
          <dd class="layui-hide-sm layui-show-xs" lay-unselect="">
            <a href="javascript:window.open('https://gitee.com/sentsin/layui/issues');" target="_blank" rel="nofollow">问题反馈</a>
            <hr>
          </dd>
          
          <dd lay-unselect=""><a href="../../alone.html" target="_blank" lay-unselect="">独立组件</a></dd>
          <dd lay-unselect=""><a href="../../extend/index.html" target="_blank">扩展组件</a></dd>
        </dl>
      </li>
      
      
    </ul>
  </div>
</div>
 
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
 
<ul class="site-dir">
  <li><a href="#use"><cite>快速使用</cite></a></li>
  <li>
    <a href="#options">
      <cite>基础参数选项</cite>
    </a>
  </li>
  <li><a href="#api"><cite>上传接口</cite></a></li>
  
  <li><a href="#choose"><cite>回调</cite></a></li>
  <ul style="margin-left: 15px;">
    <li><a href="#choose"><cite>选择文件的回调</cite></a></li>
    <li><a href="#before"><cite>上传前的回调</cite></a></li>
    <li><a href="#done"><cite>请求成功的回调</cite></a></li>
    <li><a href="#error"><cite>请求失败的回调</cite></a></li>
    <li><a href="#allDone"><cite>多文件上传回调</cite></a></li>
    <li><a href="#progress"><cite>上传进度的回调</cite> <span class="layui-badge-dot"></span></a></li>
  </ul>
  
  <li><a href="#reload"><cite>重载实例</cite> <span class="layui-badge-dot"></span></a></li>
  <li><a href="#reUpload"><cite>重新上传</cite></a></li>
  <li><a href="#corsUpload"><cite>跨域上传</cite></a></li>
</ul>
<div class="layui-container layui-row">
  
<div class="layui-col-md3">
  <div class="layui-panel site-menu">
    <ul class="layui-menu layui-menu-lg">
      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
        <div class="layui-menu-body-title">
          基础说明
        </div>
        <hr>
        <ul>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../index.html">
                <span>开始使用 </span> 
                <span class="layui-font-12 layui-font-gray">Getting Started</span>
              </a>
              
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../base/infrastructure.html">
                <span>底层方法 </span>
                <span class="layui-font-12 layui-font-gray">基础支撑</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../base/element.html">
                <span>页面元素 </span>
                <span class="layui-font-12 layui-font-gray">规范 公共类 属性</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../base/modules.html">
                <span>模块规范 </span>
                <span class="layui-font-12 layui-font-gray">使用 扩展</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../base/faq.html">
                <span>常见问题 </span>
                <span class="layui-font-12 layui-font-gray">FAQ</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../base/changelog.html">
                <span>更新日志 </span>
                <span class="layui-font-12 layui-font-gray">changelog</span>
                
                  <span class="layui-badge-dot"></span>
                
              </a>
            </div>
          </li>
        </ul>
      </li>
      
      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
        <div class="layui-menu-body-title">
          页面元素
        </div>
        <hr>
        <ul>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../element/layout.html">
                <span>布局 </span>
                <span class="layui-font-12 layui-font-gray">栅格 后台管理布局</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../element/color.html">
                <span>颜色 </span>
                <span class="layui-font-12 layui-font-gray">主色调 颜色搭配</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../element/icon.html">
                <span>图标 </span>
                <span class="layui-font-12 layui-font-gray">iconfont 字体图标</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../element/anim.html">
                <span>动画 </span>
                <span class="layui-font-12 layui-font-gray">内置 CSS3 动画</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../element/button.html">
                <span>按钮 </span>
                <span class="layui-font-12 layui-font-gray">button</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../element/form.html">
                <span>表单 </span>
                <span class="layui-font-12 layui-font-gray">form 元素集合</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../element/nav.html">
                <span>导航 </span>
                <span class="layui-font-12 layui-font-gray">nav 面包屑</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../element/menu.html">
                <span>菜单 </span>
                <span class="layui-font-12 layui-font-gray">menu 基础菜单</span>
                
                  <span class="layui-badge-dot"></span>
                
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../element/tab.html">
                <span>选项卡 </span>
                <span class="layui-font-12 layui-font-gray">Tabs 切换</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../element/progress.html">
                <span>进度条 </span>
                <span class="layui-font-12 layui-font-gray">progress</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../element/panel.html">
                <span>面板 </span>
                <span class="layui-font-12 layui-font-gray">panel 卡片 折叠</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../element/table.html">
                <span>表格 </span>
                <span class="layui-font-12 layui-font-gray">静态 table</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../element/badge.html">
                <span>徽章 </span>
                <span class="layui-font-12 layui-font-gray">小圆点  小边框</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../element/timeline.html">
                <span>时间线 </span>
                <span class="layui-font-12 layui-font-gray">timeline</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../element/auxiliar.html">
                <span>辅助 </span>
                <span class="layui-font-12 layui-font-gray">引用 字段集 横线等</span>
              </a>
            </div>
          </li>
        </ul>
      </li>
      
      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
        <div class="layui-menu-body-title">
          内置模块
        </div>
        <hr>
        <ul>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="layer.html">
                <span>弹出层 </span>
                <span class="layui-font-12 layui-font-gray">layer</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="laydate.html">
                <span>日期与时间选择 </span>
                <span class="layui-font-12 layui-font-gray">laydate</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="laypage.html">
                <span>分页 </span>
                <span class="layui-font-12 layui-font-gray">laypage</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="laytpl.html">
                <span>模板引擎 </span>
                <span class="layui-font-12 layui-font-gray">laytpl</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="table.html">
                <span>数据表格 </span>
                <span class="layui-font-12 layui-font-gray">table</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="form.html">
                <span>表单 </span>
                <span class="layui-font-12 layui-font-gray">form</span>
              </a>
            </div>
          </li>
          <li class="layui-menu-item-checked2">
            <div class="layui-menu-body-title">
              <a href="">
                <span>文件上传 </span>
                <span class="layui-font-12 layui-font-gray">upload</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="dropdown.html">
                <span>下拉菜单 </span>
                <span class="layui-font-12 layui-font-gray">dropdown</span>
                
                  <span class="layui-badge-dot"></span>
                
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="transfer.html">
                <span>穿梭框 </span>
                <span class="layui-font-12 layui-font-gray">transfer</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="tree.html">
                <span>树形组件 </span>
                <span class="layui-font-12 layui-font-gray">tree</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="colorpicker.html">
                <span>颜色选择器 </span>
                <span class="layui-font-12 layui-font-gray">colorpicker</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="element.html">
                <span>常用元素操作 </span>
                <span class="layui-font-12 layui-font-gray">element</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="slider.html">
                <span>滑块 </span>
                <span class="layui-font-12 layui-font-gray">slider</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="rate.html">
                <span>评分 </span>
                <span class="layui-font-12 layui-font-gray">rate</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="carousel.html">
                <span>轮播 </span>
                <span class="layui-font-12 layui-font-gray">carousel</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="flow.html">
                <span>流加载 </span>
                <span class="layui-font-12 layui-font-gray">flow</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="util.html">
                <span>工具组件 </span>
                <span class="layui-font-12 layui-font-gray">util</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="code.html">
                <span>代码高亮显示 </span>
                <span class="layui-font-12 layui-font-gray">code</span>
              </a>
            </div>
          </li>
<li class="">
            <div class="layui-menu-body-title">
              <a href="layedit.html">
                <span>富文本编辑器 </span>
                <span class="layui-font-12 layui-font-gray">layedit</span>
              </a>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </div>
  <div class="layui-hide-v"> - </div>
</div>

  
  <div class="layui-col-md9 site-content">
    <h1 class="site-h1"><i class="layui-icon">&#xe62f;</i> 图片/文件上传 - layui.upload</h1>
    <div class="site-tips site-text">
      <p>上传模块自 layui 2.0 的版本开始，进行了全面重写，这使得它不再那么单一，它所包含的不仅是更为强劲的功能，还有灵活的 UI。任何元素都可以作为上传组件来调用，譬如按钮、图片、普通的 DIV 等等，而不再是一个单调的 file 文件域。</p>
    </div>
    <div class="site-tips site-text">
      <p>模块加载名称：<em>upload</em></p>
    </div>
    
    
    
    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="use">快速使用</a></legend>
    </fieldset>
    <div class="site-text">
      <p>一切从小试牛刀开始。通常情况下，我们上传文件是借助 type="file" 的 input 标签来完成的，但非常遗憾的是，它不能很好地与其它表单元素并存，所以我们常常要单独为它做一个业务层面的“异步上传”，即先让图片上传，再和其它表单一起提交保存。下面是一个小示例：</p>
      
      <p>
        <button type="button" class="layui-btn" id="test1">
          <i class="layui-icon">&#xe67c;</i>上传图片
        </button>
      </p>
      <p>这原本只是一个普通的 button，正是 upload 模块赋予了它“文件选择”的特殊技能。当然，你还可以随意定制它的样式，而不是只局限于按钮。</p>  
      <pre class="layui-code" lay-title="对应的代码">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;title&gt;upload模块快速使用&lt;/title&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;/static/build/layui.css&quot; media=&quot;all&quot;&gt;
&lt;/head&gt;
&lt;body&gt;
 
&lt;button type="button" class="layui-btn" id="test1">
  &lt;i class="layui-icon">&amp;#xe67c;&lt;/i>上传图片
&lt;/button>
 
&lt;script src=&quot;/static/build/layui.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
layui.use(&#x27;upload&#x27;, function(){
  var upload = layui.upload;
   
  //执行实例
  var uploadInst = upload.render({
    elem: '#test1' //绑定元素
    ,url: '/upload/' //上传接口
    ,done: function(res){
      //上传完毕回调
    }
    ,error: function(){
      //请求异常回调
    }
  });
});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
      <p>一切看起来是那样的简单，乃至于我不得不凑一段文字来填充这一行的版面。这样好像与下文衔接起来会比较谐调的样子（自我感觉）</p>
    </div>
    
    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="options">核心方法与基础参数选项</a></legend>
    </fieldset>
    <div class="site-text">
      <p>使用 upload 模块必须与 <em>upload.render(options)</em> 方法打交道，其中的 <em>options</em>即为基础参数，它是一个对象。</p>
      <pre class="layui-code">
var upload = layui.upload; //得到 upload 对象
 
//创建一个上传组件
upload.render({
  elem: '#id'
  ,url: ''
  ,done: function(res, index, upload){ //上传后的回调
  
  } 
  //,accept: 'file' //允许上传的文件类型
  //,size: 50 //最大允许上传的文件大小
  //,……
})
      </pre>
      <p>从 layui 2.1.0 开始，允许你直接在元素上设定基础参数，如：</p>
      <pre class="layui-code">
【HTML】
&lt;button class="layui-btn test" lay-data="{url: '/a/'}"&gt;上传图片&lt;/button&gt;
&lt;button class="layui-btn test" lay-data="{url: '/b/', accept: 'file'}"&gt;上传文件&lt;/button&gt;
 
【JS】
upload.render({
  elem: '.test'
  ,done: function(res, index, upload){
    //获取当前触发上传的元素，一般用于 elem 绑定 class 的情况，注意：此乃 layui 2.1.0 新增
    var item = this.item;
  }
})
      </pre>
      <p>更多支持的参数详见下表，合理的配置它们，应对各式各样的业务需求。<p>
      <table class="layui-table">
      <colgroup>
        <col width="120">
        <col>
        <col width="120">
        <col width="200">
      </colgroup>
      <thead>
        <tr>
          <th>参数选项</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
        </tr> 
      </thead>
      <tbody>
        <tr>
          <td>elem</td>
          <td>指向容器选择器，如：elem: '#id'。也可以是DOM对象</td>
          <td>string/object</td>
          <td>-</td>
        </tr>
        <tr>
          <td>url</td>
          <td>服务端上传接口，返回的数据规范请详见下文</td>
          <td>string</td>
          <td>-</td>
        </tr>
        <!--<tr>
          <td>method</td>
          <td>上传接口的 HTTP 类型</td>
          <td>string</td>
          <td>post</td>
        </tr>-->
        <tr>
          <td>data <a name="data"></a></td>
          <td>请求上传接口的额外参数。如：data: {id: 'xxx'}
            <br> 从 layui 2.2.6 开始，支持动态值，如:
            <pre class="layui-code">
data: {
  id: function(){
    return $('#id').val();
  }
}
            </pre>
          </td>
          <td>object</td>
          <td>-</td>
        </tr>
        <tr>
          <td>headers</td>
          <td>接口的请求头。如：<em>headers: {token: 'sasasas'}</em>。注：该参数为 layui 2.2.6 开始新增</td>
        </tr>
        <tr>
          <td>accept</td>
          <td>指定允许上传时校验的文件类型，可选值有：<em>images</em>（图片）、<em>file</em>（所有文件）、<em>video</em>（视频）、<em>audio</em>（音频）</td>
          <td>string</td>
          <td>images</td>
        </tr>
        <tr>
          <td>acceptMime <a name="acceptMime"></a></td>
          <td>规定打开文件选择框时，筛选出的文件类型，值为用逗号隔开的 MIME 类型列表。如：
          <br><em>acceptMime: 'image/*'</em>（只显示图片文件）
          <br><em>acceptMime: 'image/jpg, image/png'</em>（只显示 jpg 和 png 文件）
          <br><span style="color: #FF5722;">注：该参数为 layui 2.2.6 开始新增</span></td>
          <td>string</td>
          <td>images</td>
        </tr>
        <tr>
          <td>exts</td>
          <td>允许上传的文件后缀。一般结合 <em>accept</em> 参数类设定。假设 accept 为 file 类型时，那么你设置 <em>exts: 'zip|rar|7z'</em> 即代表只允许上传压缩格式的文件。如果 accept 未设定，那么限制的就是图片的文件格式</td>
          <td>string</td>
          <td>jpg|png|gif|bmp|jpeg</td>
        </tr>
        <tr>
          <td>auto</td>
          <td>是否选完文件后自动上传。如果设定 <em>false</em>，那么需要设置 <em>bindAction</em> 参数来指向一个其它按钮提交上传</td>
          <td>boolean</td>
          <td>true</td>
        </tr>
        <tr>
          <td>bindAction</td>
          <td>指向一个按钮触发上传，一般配合 auto: false 来使用。值为选择器或DOM对象，如：bindAction: '#btn'</td>
          <td>string/object</td>
          <td>-</td>
        </tr>
        <tr>
          <td>field</td>
          <td>设定文件域的字段名</td>
          <td>string</td>
          <td>file</td>
        </tr>
        <tr>
          <td>size</td>
          <td>设置文件最大可允许上传的大小，单位 KB。不支持ie8/9</td>
          <td>number</td>
          <td>0（即不限制）</td>
        </tr>
        <tr>
          <td>multiple</td>
          <td>是否允许多文件上传。设置 <em>true</em>即可开启。不支持ie8/9</td>
          <td>boolean</td>
          <td>false</td>
        </tr>
        <tr>
          <td>number</td>
          <td>设置同时可上传的文件数量，一般配合 multiple 参数出现。<br>注意：<em>该参数为 layui 2.2.3 开始新增</em></td>
          <td>number</td>
          <td>0（即不限制）</td>
        </tr>
        <tr>
          <td>drag</td>
          <td>是否接受拖拽的文件上传，设置 <em>false</em> 可禁用。不支持ie8/9</td>
          <td>boolean</td>
          <td>true</td>
        </tr>
        <tr><td colspan="4" style="text-align: center;">回调</td></tr>
        <tr>
          <td>choose</td>
          <td>选择文件后的回调函数。返回一个object参数，详见下文</td>
          <td>function</td>
          <td>-</td>
        </tr>
        <tr>
          <td>before</td>
          <td>文件提交上传前的回调。返回一个object参数（同上），详见下文</td>
          <td>function</td>
          <td>-</td>
        </tr>
        <tr>
          <td>done</td>
          <td>执行上传请求后的回调。返回三个参数，分别为：<em>res</em>（服务端响应信息）、<em>index</em>（当前文件的索引）、<em>upload</em>（重新上传的方法，一般在文件上传失败后使用）。详见下文</td>
          <td>function</td>
          <td>-</td>
        </tr>
        <tr>
          <td>error</td>
          <td>执行上传请求出现异常的回调（一般为网络异常、URL 404等）。返回两个参数，分别为：<em>index</em>（当前文件的索引）、<em>upload</em>（重新上传的方法）。详见下文</td>
          <td>function</td>
          <td>-</td>
        </tr>
      </tbody>
    </table>
    </div>
    
    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="api">上传接口</a></legend>
    </fieldset>
    <div class="site-text">
      <p>设定一个 URL 地址给 <em>url</em> 参数，用来告诉 upload 模块的服务端上传接口。像你平时使用Ajax一样。如：</p>
      <pre class="layui-code">
upload.render({
  elem: '#id'
  ,url: '/api/upload/' //必填项
  ,method: ''  //可选项。HTTP类型，默认post
  ,data: {} //可选项。额外的参数，如：{id: 123, abc: 'xxx'}
});      
      </pre>
      <p>该接口返回的相应信息（response）必须是一个标准的 JSON 格式，如：</p>
      <pre class="layui-code" lay-title="Response" lay-skin="notepad">
{
  "code": 0
  ,"msg": ""
  ,"data": {
    "src": "http://cdn.layui.com/123.jpg"
  }
}       
      </pre>
      <p style="color: #FF5722;">
        注意1：你不一定非得按照上述格式返回，只要是合法的 JSON 字符即可。其响应信息会转化成JS对象传递给 <em>done</em> 回调。
        <br>注意2：如果上传后，出现文件下载框（一般为ie下），那么你需要在服务端对response的header设置 <em>Content-Type: text/html</em>
      </p>
    </div>
    
    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="choose">选择文件的回调</a></legend>
    </fieldset>
    <div class="site-text">
      <p>在文件被选择后触发，该回调会在 before 回调之前。一般用于非自动上传（即 <em>auto: false</em> ）的场景，比如预览图片等。</p>
      <pre class="layui-code">
upload.render({
  elem: '#id'
  ,url: '/api/upload/'
  ,auto: false //选择文件后不自动上传
  ,bindAction: '#testListAction' //指向一个按钮触发上传
  ,choose: function(obj){
    //将每次选择的文件追加到文件队列
    var files = obj.pushFile();
    
    //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
    obj.preview(function(index, file, result){
      console.log(index); //得到文件索引
      console.log(file); //得到文件对象
      console.log(result); //得到文件base64编码，比如图片
      
      //obj.resetFile(index, file, '123.jpg'); //重命名文件名，layui 2.3.0 开始新增
      
      //这里还可以做一些 append 文件列表 DOM 的操作
      
      //obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用
      //delete files[index]; //删除列表中对应的文件，一般在某个事件中使用
    });
  }
});      
      </pre>
      <p>事实上这是一个非常实用的存在，可轻松应对复杂的列表文件上传管理。具体可移步到 示例 页面，里面有一个文件列表的小例子。</p>
    </div>
    
    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="before">文件上传前的回调</a></legend>
    </fieldset>
    <div class="site-text">
      <p>在 <em>choose</em> 回调之后、<em>done/error</em> 回调之前触发。返回的参数完全类似 choose 回调。一般用于上传完毕前的loading、图片预览等。</p>
      <pre class="layui-code">
upload.render({
  elem: '#id'
  ,url: '/api/upload/'
  ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
    layer.load(); //上传loading
  }
  ,done: function(res, index, upload){
    layer.closeAll('loading'); //关闭loading
  }
  ,error: function(index, upload){
    layer.closeAll('loading'); //关闭loading
  }
});      
      </pre>
    </div>
    
    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="done">上传接口请求成功的回调</a></legend>
    </fieldset>
    <div class="site-text">
      <p>在上传接口请求完毕后触发，但文件不一定是上传成功的，只是接口的响应状态正常（200）。回调返回三个参数，分别为：<em>服务端响应信息</em>、<em>当前文件的索引</em>、<em>重新上传的方法</em></p>
      <pre class="layui-code">
upload.render({
  elem: '#id'
  ,url: '/api/upload/'
  ,done: function(res, index, upload){
    //假设code=0代表上传成功
    if(res.code == 0){
      //do something （比如将res返回的图片链接保存到表单的隐藏域）
    }
    
    //获取当前触发上传的元素，一般用于 elem 绑定 class 的情况，注意：此乃 layui 2.1.0 新增
    var item = this.item;
    
    //文件保存失败
    //do something
  }
});      
      </pre>
    </div>
    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="error">上传请求失败的回调</a></legend>
    </fieldset>
    <div class="site-text">
      <p>当请求上传时出现异常时触发（如网络异常、404/500等）。回调返回两个参数，分别为：<em>当前文件的索引</em>、<em>重新上传的方法</em></p>
      <pre class="layui-code">
upload.render({
  elem: '#id'
  ,url: '/api/upload/'
  ,error: function(index, upload){
    //当上传失败时，你可以生成一个“重新上传”的按钮，点击该按钮时，执行 upload() 方法即可实现重新上传
  }
});      
      </pre>
    </div>
    
    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="allDone">多文件上传完毕后的状态回调</a></legend>
    </fieldset>
    <div class="site-text">
      <p>只有当开启多文件时（即 multiple: true），该回调才会被触发。回调返回一个 object 类型的参数，包含一些状态数据：</p>
      <pre class="layui-code">
upload.render({
  elem: '#id'
  ,url: '/api/upload/'
  ,multiple: true
  ,allDone: function(obj){ //当文件全部被提交后，才触发
    console.log(obj.total); //得到总文件数
    console.log(obj.successful); //请求成功的文件数
    console.log(obj.aborted); //请求失败的文件数
  }
  ,done: function(res, index, upload){ //每个文件提交一次触发一次。详见“请求成功的回调”
  
  }
});      
      </pre>
    </div>
    
    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="progress">文件上传进度的回调</a></legend>
    </fieldset>
    <div class="site-text">
      <p>在网速一般的情况下，大文件的上传通常需要一定时间的等待，而浏览器并不会醒目地告知你它正在努力地上传中，此时为了提升用户体验，我们可以通过该回调制作一个进度条。<span style="color: #FF5722;">注：该回调为 layui 2.5.5 新增</span></p>
      <pre class="layui-code">
upload.render({
  elem: '#id'
  ,url: '/api/upload/'
  ,progress: function(n, elem, res, index){
    var percent = n + '%' //获取进度百分比
    element.progress('demo', percent); //可配合 layui 进度条元素使用
    
    console.log(elem); //得到当前触发的元素 DOM 对象。可通过该元素定义的属性值匹配到对应的进度条。
    console.log(res); //得到 progress 响应信息
    console.log(index); //得到当前上传文件的索引，多文件上传时的进度条控制，如：
    element.progress('demo-'+ index, n + '%'); //进度条
  }
});       
      </pre>
    </div>
    
    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="reload">重载实例</a></legend>
    </fieldset>
    <div class="site-text">
      <p>有时你可能需要对 <em>upload.render()</em> 实例进行重载，通过改变一些参数（如将上传文件重置为只上传图片等场景）来重置功能。如：</p>
      <pre class="layui-code">
//创建一个实例
var uploadInst = upload.render({
  elem: '#id'
  ,url: '/api/upload/'
  ,size: 1024*5 //限定大小
});
 
//重载该实例，支持重载全部基础参数
uploadInst.reload({
  accept: 'images' //只允许上传图片
  ,acceptMime: 'image/*' //只筛选图片
  ,size: 1024*2 //限定大小
}); 
      </pre>
       <p>注意：<span style="color: #FF5722;">该方法为 layui 2.5.0 开始新增</span></p>
    </div>
    
   <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="reUpload">重新上传</a></legend>
    </fieldset>
    <div class="site-text">
      <p>在执行 <em>upload.render(options)</em> 方法时，其实有返回一个实例对象，以便对完成重新上传等操作。注意：这是对当前上传队列的全局重新上传，而 <em>choose</em> 回调返回的 <em>obj.upload(index, file)</em> 方法则是对单个文件进行重新上传。如：</p>
      <pre class="layui-code">
var uploadInst = upload.render({
  elem: '#id'
  ,url: '/api/upload/'
  ,choose: function(obj){
    obj.preview(function(index, file, result){
      //对上传失败的单个文件重新上传，一般在某个事件中使用
      //obj.upload(index, file);
    });
  }
});
 
//重新上传的方法，一般在某个事件中使用
//uploadInst.upload(); 
      </pre>
    </div>
    
    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="corsUpload">跨域上传</a></legend>
    </fieldset>
    <div class="site-text">
      <p>有些时候，可能会涉及到文件跨域操作，过去版本的 upload 模块最大的缺陷恰恰在于这里。而从 layui 2.0 的版本开始，我们已经对 跨域做了支持。但鉴于代码的冗余度等多方面考虑，在IE9以下版本环境中，仍然不支持跨域。其它所有版本的IE和Chrome/FireFox等高级浏览器均支持。</p>
      
      <p>那么，需要你怎么做？通常来说，是借助 <em>CORS（跨资源共享）</em> 方案，即对接口所在的服务器设置：<em>Access-Control-Allow-Origin</em> 详见Google，配置起来还是挺简单的。而至于域名限制，一般是服务端程序中去做处理。这里不做过多赘述。</p>
    </div>
    
    
  </div>
</div>
<script>
window.global = {
  pageType: 'doc'
  ,preview: function(){
    var preview = document.getElementById('LAY_preview');
    return preview ? preview.innerHTML : '';
  }()
};
</script>
<script async="" src="../../pagead/js/adsbygoogle.js"></script>
<div class="site-tree-mobile layui-hide">
  <i class="layui-icon layui-icon-spread-left"></i>
</div>
<div class="site-mobile-shade"></div>
 
<script src="../../layui/dist/layui.js" ></script>
<script>
layui.config({
  base: '../../static/lay/modules/layui/'
  ,version: '1632428048355'
}).use('global');
</script>
 <script>
layui.use('upload', function(){
  var upload = layui.upload;
  
  //执行示例
  var uploadInst = upload.render({
    elem: '#test1'
    ,url: '/upload/'
    ,done: function(res){
      //上传完毕回调
    }
    ,error: function(){
      //请求异常回调
    }
  });
});
</script>
</body>
</html>